<template>
    <div class="carousel w-full relative overflow-hidden rounded-xl" style="aspect-ratio: 16/7;">
        <div v-for="(slide, index) in slides" :key="index"
            class="carousel-item absolute w-full h-full transition-opacity duration-500"
            :class="{ 'opacity-0': currentIndex !== index }">
            <img :src="slide.image" class="w-full h-full object-cover" :alt="slide.title" />
            
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 text-white">
                <h2 class="text-3xl font-bold mb-2">{{ slide.title }}</h2>
                <p class="text-lg max-w-3xl">{{ slide.description }}</p>
                <button class="btn bg-red-700 hover:bg-red-800 text-white border-none mt-4">了解更多</button>
            </div>
            
            <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                <button @click="prevSlide"
                    class="btn btn-circle bg-black/30 hover:bg-red-700 border-none text-white">❮</button>
                <button @click="nextSlide"
                    class="btn btn-circle bg-black/30 hover:bg-red-700 border-none text-white">❯</button>
            </div>
        </div>
    </div>

    <div class="flex justify-center w-full py-3 gap-2">
        <button v-for="(_, index) in slides" :key="index" @click="goToSlide(index)"
            class="btn btn-xs w-3 h-3 rounded-full p-0 min-h-0 min-w-0" 
            :class="{ 'bg-red-700': currentIndex === index, 'bg-gray-300': currentIndex !== index }">
        </button>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

// 使用公共静态路径
const slides = ref([
    {
        id: 1,
        title: '专业消防设备全线产品',
        description: '提供从火灾报警到灭火系统的全套消防解决方案，保障生命财产安全',
        image: '/images/Snipaste_2024-10-25_16-11-10.png'
    },
    {
        id: 2,
        title: '国家认证消防产品',
        description: '所有产品均通过国家消防产品认证，品质可靠，性能稳定',
        image: '/images/Snipaste_2024-10-25_16-11-22.png'
    },
    {
        id: 3,
        title: '专业消防技术咨询',
        description: '拥有经验丰富的消防技术团队，提供专业的消防安全咨询服务',
        image: '/images/Snipaste_2024-10-25_16-12-07.png'
    },
    {
        id: 4,
        title: '多场景消防解决方案',
        description: '针对高层建筑、工业园区、商场等不同场景，提供定制化消防解决方案',
        image: '/images/mountain-3_8K.jpg'
    }
]);

const currentIndex = ref(0);
const timer = ref(null);
const autoPlayInterval = 5000;

const nextSlide = () => {
    currentIndex.value = (currentIndex.value + 1) % slides.value.length;
};

const prevSlide = () => {
    currentIndex.value = (currentIndex.value - 1 + slides.value.length) % slides.value.length;
};

const goToSlide = (index) => {
    currentIndex.value = index;
    restartAutoPlay();
};

const startAutoPlay = () => {
    stopAutoPlay();
    timer.value = setInterval(nextSlide, autoPlayInterval);
};

const stopAutoPlay = () => {
    if (timer.value) {
        clearInterval(timer.value);
        timer.value = null;
    }
};

const restartAutoPlay = () => {
    stopAutoPlay();
    startAutoPlay();
};

onMounted(() => {
    startAutoPlay();
});

onBeforeUnmount(() => {
    stopAutoPlay();
});
</script>

<style scoped>
.carousel-item {
    transition: opacity 0.5s ease-in-out;
}

.btn-circle {
    opacity: 0.7;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.btn-circle:hover {
    opacity: 1;
}

.carousel:hover .btn-circle {
    opacity: 0.9;
}
</style>